<template>
  <el-dialog
    title="采购退货"
    :visible="selectImportReturnDialog"
    width="70%"
    class="ImportReturn-select"
    @close="selectImportReturnClose"
  >
    <div class="app-container ImportReturn-box">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :inline="true" label-width="70px" class="search-top">
            <div class="search-sub">
              <el-form-item label="供应商名称" label-width="82">
                <el-input
                  v-model="searchForm.supplier"
                  clearable
                  size="small"
                  style="width: 250px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search"
                  >搜索
                </el-button>
              </el-form-item>
            </div>
            <div>
              <el-button
                type="primary"
                plain
                icon="el-icon-menu"
                size="mini"
                @click="checkleAll"
                >查询所有</el-button
              >
            </div>
          </el-form>
          <!-- 订单数据 -->
          <div ref="tableData">
            <el-form :rules="rules" :model="ImportReturnForm">
              <el-table
                :data="ImportReturnForm.ImportReturnData"
                border
                v-loading="loading"
                :height="maxHeight"
              >
                <el-table-column
                  type="index"
                  width="60"
                  align="center"
                  label="序号"
                >
                </el-table-column>
                <el-table-column
                  label="单据编码"
                  align="center"
                  width="130"
                  prop="po_code"
                >
                </el-table-column>
                <el-table-column prop="supplier" label="供应商" align="center">
                </el-table-column>
                <!-- <el-table-column
                  prop="pp_number"
                  label="销售订单号"
                  align="center"
                  width="120"
                >
                </el-table-column> -->
                <!-- <el-table-column
                  prop="ppDate"
                  label="订单交期"
                  align="center"
                  width="120"
                >
                  <template v-slot="scope">
                    <span
                      v-if="
                        scope.row.ppDate !== undefined &&
                        scope.row.ppDate !== null
                      "
                      >{{ scope.row.ppDate | inMaterTime }}</span
                    >
                    <span v-else></span>
                  </template>
                </el-table-column> -->

                <el-table-column
                  label="物料编码"
                  align="center"
                  prop="inv_code"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  label="物料名称"
                  align="center"
                  prop="inv_name"
                >
                  <template v-slot="scope">
                    <div>
                      <span
                        >{{ scope.row.inv_name
                        }}{{ scope.row.inv_attribute }}</span
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="unit_name"
                  label="主计量"
                  align="center"
                  width="90"
                >
                </el-table-column>

                <el-table-column
                  label="到货数量"
                  align="center"
                  prop="surplus"
                  width="120"
                >
                  <template v-slot="scope">
                    <div style="text-align: right">
                      <span>{{ scope.row.surplus }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="amountReceived"
                  label="退货数量"
                  align="center"
                  width="120"
                >
                  <template v-slot="scope">
                    <el-form-item
                      :class="{ 'is-error': scope.row.borderStatus }"
                      :prop="
                        'ImportReturnData.' + scope.$index + '.amountReceived'
                      "
                      :rules="rules.amountReceived"
                    >
                      <div class="collection-amount">
                        <el-input
                          v-model="scope.row.amountReceived"
                          @change="handleReceived(scope.$index, scope.row)"
                        >
                        </el-input>
                      </div>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="ImportReturn-success" v-if="isOper">
      <div>
        <el-button
          :disabled="successStatus"
          type="primary"
          @click="handleImportReturnSuccess"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  listImportDetail, //查询明细
} from "../../api/reject";
//输入是否为数字效验
import { isAccord } from "@/utils/cingsoft";
export default {
  data() {
    // 领取量效验
    var checkOutReceived = (rule, value, callback) => {
      if (value == "") {
        callback();
      } else if (!isAccord(value)) {
        this.successStatus = true;
        callback(new Error(""));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: false,
      // 最大高度
      maxHeight: null,
      // 是否显示操作
      isOper: false,
      //确定按钮状态
      successStatus: true,
      //单据编码
      po_code: [],
      //参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        supplier: "",
        supplyType: "",
      },
      //搜索参数
      searchForm: {
        supplier: "",
      },
      //订单数据
      ImportReturnForm: {
        ImportReturnData: [],
      },
      //已领取量
      successReceived: [],
      //合计
      rules: {
        //是否必须输入
        amountReceived: [
          {
            validator: checkOutReceived,
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    selectImportReturnDialog: {
      type: Boolean,
      default: true,
    },
    supplyType: {
      type: String,
      default: "",
    },
    //小数位数
    decimal: {
      type: String,
      default: "2",
    },
  },
  created() {
    this.getImportReturnList();
  },
  methods: {
    // 获取退货数据
    getImportReturnList() {
      this.loading = true;
      this.queryParams.supplyType = this.supplyType;
      listImportDetail(this.queryParams).then((res) => {
        if (res.code == 200) {
          const list = JSON.parse(JSON.stringify(res.rows));
          list.forEach((obj) => {
            obj.amountReceived = "";
            obj.borderStatus = false;
            obj.index = "";
          });
          this.ImportReturnForm.ImportReturnData = list;
          this.getDecimal();
          this.isOper = true;
          this.maxHeight = `${document.documentElement.clientHeight}` - 400;
          this.loading = false;
        }
      });
    },
    //搜索
    search() {
      this.queryParams.supplier = this.searchForm.supplier;
      this.getImportReturnList();
    },

    // 查询所有
    checkleAll() {
      this.queryParams.supplier = "";
      this.searchForm.supplier = "";
      this.getImportReturnList();
    },
    // 弹框状态
    selectImportReturnClose() {
      this.$emit("selectImportReturnClose");
    },

    // 领取量添加与效验
    handleReceived(index, data) {
      if (data.amountReceived > data.quantity) {
        data.borderStatus = true; //改变输入框状态
      } else if (isAccord(data.amountReceived) || data.amountReceived == "") {
        if (data.amountReceived !== "") {
          data.index = index;
          let number = this.po_code.findIndex((item) => {
            return item.index == index;
          });
          if (number == -1) {
            this.po_code.push(data);
          } else {
            this.po_code.splice(number, 1, data);
          }
        } else {
          this.po_code.forEach((value, i) => {
            if (value.index == index) {
              this.po_code.splice(i, 1);
            }
          });
        }
        data.borderStatus = false; //改变输入框状态
      }

      // 确定按钮状态
      this.ImportReturnForm.ImportReturnData.find((obj) => {
        if (obj.borderStatus == true || this.po_code.length == 0) {
          return (this.successStatus = true);
        } else {
          return (this.successStatus = false);
        }
      });
    },

    //确定领取
    handleImportReturnSuccess() {
      let code = this.po_code[0].po_code;
      let flag = this.po_code.every((item) => item.po_code === code);
      if (flag == true) {
        this.$emit("handleImportReturnSuccess", this.po_code);
        this.selectImportReturnClose();
      } else {
        this.msgError("只能退同一单据物料");
      }
    },
    //格式化数量单价金额小数位数
    getDecimal() {
      if (this.ImportReturnForm.ImportReturnData.length > 0) {
        this.ImportReturnForm.ImportReturnData.forEach((item) => {
          if (item.price !== null && item.price !== undefined) {
            item.price = parseFloat(item.price).toFixed(this.decimal);
          }
          if (item.surplus !== null && item.surplus !== undefined) {
            item.surplus = parseFloat(item.surplus).toFixed(this.decimal);
          }
          if (item.amount !== null && item.amount !== undefined) {
            item.amount = parseFloat(item.amount).toFixed(2);
          }
          if (item.wmQuantity !== null && item.wmQuantity !== undefined) {
            item.wmQuantity = parseFloat(item.wmQuantity).toFixed(this.decimal);
          }
          if (item.orderQuantity !== null && item.orderQuantity !== undefined) {
            item.wmQuantity = parseFloat(item.orderQuantity).toFixed(
              this.decimal
            );
          }
          if (item.inQuantity !== null && item.inQuantity !== undefined) {
            item.inQuantity = parseFloat(item.inQuantity).toFixed(this.decimal);
          }
        });
      }
    },
    // 关闭弹框
    handleClose() {
      this.selectImportReturnClose();
    },
  },
  filters: {
    //时间格式化
    inMaterTime(date) {
      let time = new Date(date);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },

    //PP专用
    isPurpose(i) {
      switch (i) {
        case "0":
          return "否";
          break;
        case "1":
          return "是";
          break;
        default:
          return "否";
      }
    },
    // 供应商字符串截取
    beyondStr(str) {
      if (str.length > 6) {
        str = str.substr(0, 6) + "...";
        return str;
      }
    },
  },
};
</script>
<style lang="scss">
.ImportReturn-in-dialog {
  .Billing-box {
    padding: 15px;
    box-shadow: 1px 1px 10px 1px #eee;
    border-radius: 5px;
    padding-bottom: 10px;
    margin: 10px 10px 0px 10px;

    h2 {
      font-size: 15px;
      font-weight: 700;
      margin: 0;
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
  }

  .el-input.is-disabled .el-input__inner {
    color: #333;
  }
}

.ImportReturn-select {
  .el-dialog__body {
    height: calc(100vh - 250px);
  }
  .lab-sub {
    label {
      width: 58px !important;
    }
  }
  .el-button--mini {
    padding: 8px 20px !important;
  }
  .search-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .search-sub {
      height: 32px;
    }
  }
  .total-amount {
    float: right;
    font-weight: 700;
    width: 150px;

    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 23px;
      line-height: 23px;

      span {
        font-size: 16px;
      }
    }
  }

  .el-input--medium .el-input__inner {
    background: none;
    border-color: #fff;
    border-radius: 0;
    padding: 0;
    padding-right: 0 !important;
    height: 31px;
    line-height: 0;
  }

  .el-form-item__content {
    line-height: 30px;
  }

  .el-form-item.is-error .el-input__inner,
  .el-form-item.is-error .el-input__inner:focus,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner:focus {
    border-color: #ff4949;
  }

  .collection-amount {
    input {
      text-align: right;
    }
  }

  .el-table--medium th,
  .el-table--medium td {
    padding: 0 !important;
  }

  .app-container {
    padding-top: 0;
  }

  .el-table {
    cursor: pointer;
  }
  .ImportReturn-box {
    .el-tag.el-tag--info {
      color: #1890ff;
    }

    .Billing-box {
      padding: 15px;
      box-shadow: 1px 1px 10px 1px #eee;
      border-radius: 5px;
      padding-bottom: 10px;
      margin: 10px 10px 0px 10px;

      h2 {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 15px;
        margin-bottom: 15px;
      }
    }

    .el-switch {
      display: flex;
      justify-content: center;
    }

    .el-radio__input.is-disabled.is-checked .el-radio__inner {
      background-color: #f5f7fa;
      border-color: #999;
    }

    .el-radio {
      margin-right: 18px;
    }

    .el-radio__label {
      padding-left: 5px;
    }

    .el-radio:nth-of-type(3) {
      margin-right: 0;
    }

    .el-switch.is-disabled {
      opacity: 1;
    }

    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      height: 35px;
    }

    .el-table__body tr:hover > td {
      background: #fff;
    }

    .el-dialog__body {
      padding-right: 15px;
      padding-bottom: 20px;
    }

    .el-input.is-disabled .el-input__inner {
      color: #333;
    }
  }

  .close-select {
    overflow: hidden;

    i {
      float: right;
      margin-right: 15px;
      color: #909399;
      cursor: pointer;
    }
  }

  .ImportReturn-success {
    position: absolute;
    bottom: 20px;
    right: 40px;

    button {
      padding: 8px 40px;
    }
  }
}
</style>
